<!--
 * @Descripttion: 核验记录
 * @version: 
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-07-30 14:37:33
--> 
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-width="90px" label-position="right">
          <el-form-item label="审核状态：">
            <el-select v-model="filters.status" placeholder="请选择" @change="handleQuery">
              <el-option
                v-for="item in personType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input
              class="normal"
              placeholder="请输入"
              @keydown.enter.native="handleQuery"
              clearable
              v-model="filters.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择小区:">
            <el-select v-model="filters.CID" filterable placeholder="请选择" @change="handleQuery" clearable>
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button type="primary" @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          ref="selectBox"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column prop="name" header-align="center" align="center" label="姓名" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="photoCheck == scope.row.photoCheck">{{ scope.row.name }}</span>
              <span v-else>{{ scope.row.names }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="perName" label="审核账号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.auditUserName ? scope.row.auditUserName : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Idcard" label="身份证号" align="center">
            <template slot-scope="scope">
              <span v-if="photoCheck == scope.row.photoCheck">{{ scope.row.idCard }}</span>
              <span v-else>{{ hideOfString(scope.row.idCard) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="auditType" label="审核类型" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.auditType == 0" style="color: #f56c6c">审核不通过</span>
                <span v-if="scope.row.auditType == 1" style="color: #67c23a">审核通过</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="describe" label="审核描述" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.describe ? scope.row.describe : '/' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="insertTime"
            header-align="center"
            align="center"
            label="提交时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.insertTime }}</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" header-align="center" align="center" width="260" label="操作">
            <template slot-scope="scope">
              <div class="row">
                <el-button
                  type="primary"
                  size="mini"
                  @click="getCheckEncryption() ? handleEditImg(scope.row) : (isCheckEncryption = true)"
                  :disabled="!hasPerm('pass:record:details')"
                >
                  查看照片
                </el-button>
                <el-button
                  type="warning"
                  size="mini"
                  :disabled="!hasPerm('pass:record:show')"
                  @click="
                    getCheckEncryption() ? get_sensitive_fields(scope.row, checkPhoto) : (isCheckEncryption = true)
                  "
                >
                  查看
                </el-button>
                <!-- <el-button v-if="filters.status === 0" type="danger" size="mini" @click="handleExam(scope.row)">
                  重新审核
                </el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 头像 -->
        <!-- 弹框 -->
        <el-dialog :visible.sync="dialogVisibleImg" :before-close="handleClose" width="30%">
          <img style="width: 100%" :src="getItemPhoto(currentImg)" class="imgDia" v-image-preview />
        </el-dialog>
        <!-- 编辑 -->
        <div v-if="editDialogVisible && filters.status === 0">
          <el-dialog title="编辑" :visible.sync="editDialogVisible" width="50%" :destroy-on-close="true">
            <editPage :props-form="form" @getMsg="editDialogVisible = false" @refresh="refresh()"></editPage>
          </el-dialog>
        </div>
        <el-dialog title="身份验证" :visible.sync="isCheckEncryption">
          <CheckEncryption @close="isCheckEncryption = false"></CheckEncryption>
        </el-dialog>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
import CheckEncryption from '@/components/CheckEncryption';
import editPage from '@/views/Personnel/Population/comments/addPerson';
export default {
  components: {
    editPage,
    CheckEncryption
  },
  data() {
    return {
      form: {},
      editDialogVisible: false,
      currentImg: '',
      // 头像弹框
      dialogVisibleImg: false,
      loading: false,
      // 审核状态
      personType: [
        // { label: "审核中", value: 2 },
        { label: '审核通过', value: 1 },
        { label: '审核未通过', value: 0 }
      ],
      imgs: require('@/assets/imgs/houtai/wutu.png'),
      asideShow: false,
      unitShow: false,
      pageResult: [],
      filters: {
        corpId: 0,
        corpName: '',
        username: '',
        startTime: '',
        endTime: '',
        status: 0,
        CID: ''
      },
      getCommunity: [],
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      totalSize: 0,
      photoCheck: 0,
      isCheckEncryption: false
    };
  },
  mounted() {
    this.filters.CID = localStorage.getItem('home_CID');
    this.getlist();
    this.getCommunityList();
  },
  methods: {
    refresh() {
      this.editDialogVisible = false;
      this.getlist();
    },
    // 审核
    async handleExam(row) {
      this.loading = true;
      let rs = await this.getOne(row.PID);
      if (rs.length) {
        this.form = rs[0];
        this.editDialogVisible = true;
      }
      if (rs.length === 0) {
        this.$message({
          type: 'error',
          message: '未查询到人员信息！'
        });
      }
      this.loading = false;
    },
    // 获得个人信息
    async getOne(PID) {
      let param = {
        PID: PID,
        auditStatus: 0
      };
      let rs = await this.$api.personnel.queryList(param);
      return rs.data;
    },
    //查看
    checkPhoto(row) {
      if (row.photoCheck == this.photoCheck) {
        this.photoCheck = 0;
      } else {
        this.$nextTick(() => {
          //nextTick并不是用来监听DOM变更，它的作用是一次性更改数据，并且渲染DOM
          this.$set(this.pageResult, this.photoCheck - 1, row);
        });
        this.photoCheck = row.photoCheck;
      }
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + 'avatar/' + id;
      return url;
    },
    handleClose() {
      this.dialogVisibleImg = false;
    },
    // 查看头像
    handleEditImg: function (params) {
      if (params.photo) {
        this.currentImg = params.photo;
      }
      this.dialogVisibleImg = true;
    },
    getlist(val) {
      this.loading = true;
      let params = Object.assign(
        {
          page: val ? '' : this.pageRequest.page,
          limit: val ? '' : this.pageRequest.limit
        },
        this.filters
      );
      let paramJson = JSON.stringify(params);

      this.$api.personPass.personAuditList(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.totalSize = res.count;
          this.pageResult = res.data;
          this.pageResult.forEach((item, index) => {
            if (item.Idcard) {
              item.idCard = item.Idcard;
            }
            item.names = this.formatName(item.name);
            item.insertTime = this.$format(item.insertTime);
            item.photoCheck = index + 1;
            // item.photoS =
            //   this.global.baseUrl + this.$ports.avatars + item.photo;
          });
          // console.log("vfdvfd", this.pageResult);
        } else {
          this.loading = false;
        }
      });
    },
    //名字脱敏
    formatName(name) {
      var newStr;
      if (name.length === 2) {
        newStr = name.substr(0, 1) + '*';
      } else if (name.length > 2) {
        var char = '';
        for (var i = 0, len = name.length - 2; i < len; i++) {
          char += '*';
        }
        newStr = name.substr(0, 1) + char + name.substr(-1, 1);
      } else {
        newStr = name;
      }
      return newStr;
    },
    // 小区查询
    //获取小区的列表选择器
    getCommunityList() {
      let params = {};

      params = {
        where: {
          CODES: []
        }
      };

      let param = JSON.stringify(params);
      // this.loading = true;
      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          // this.loading = false;
          this.getCommunity = res.data;
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' });
        }
      });
    },
    // 翻页
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.getlist();
    },
    //查询
    handleQuery(val) {
      this.getlist(val);
    }
  }
};
</script>

<style>
</style>